<script setup lang="ts">
import {ref, onMounted} from 'vue';
import * as echarts from "echarts";
let myHeading = ref(null)
onMounted(()=>{
  // let {proxy} = getCurrentInstance();
  // console.log(proxy.$echarts)
  // console.log(proxy.$axios)
  let myEcharts = echarts.init(myHeading.value);
  window.addEventListener('resize', function () {
    myEcharts.resize()
  })
  const option =   {
    title: {
      text: '用户数据',
      top: '20px',
      left: '30px',
      textStyle: {
        fontSize: 18,
        fontWeight: 500
      }
    },
    // 位置
    grid: {
      top: '70',
      bottom: '10%',
      right: '3%',
      left: '2%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis'
    },
    // x轴
    xAxis: {
      show: true,
      type: 'category',
      axisTick: {
        show: false
      },
      axisPointer: {
        show: true,
        type: 'line',
        handle: {
          show: true,
          size: 0
          // icon: ''
        },
        lineStyle: {
          type: 'solid',
          color: '#f57b00',
          width: 3
        }
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      boundaryGap: false,
      data: ['00：00', '2：00', '4：00', '6：00', '8：00', '10：00', '12：00', '14：00', '16：00', '18：00', '20：00', '22：00', '24：00']
    },
    // y轴
    yAxis: {
      type: 'value',
      data: [0, 20, 40, 60, 80, 100],
      splitLine: {
        show: true
      },
      splitNumber: 5,
      axisTick: {
        show: false
      },
      nameTextStyle: {
        color: '#000000'
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#000000',
          width: 3
        }
      }
    },
    // 数据
    series: [
      {
        data: [20, 26, 34, 40, 36, 30, 28, 24, 30, 28, 24, 21, 18, 25, 20],
        type: 'line',
        name: '一般',
        top: 0,
        smooth: true,
        // symbol: 'circle',
        symbolSize: 10,
        showSymbol: false,
        lineStyle: {
          color: '#faca58'
        },
        areaStyle: {
          textStyle: {
            // 文字颜色
            color: '#ffb300',
            // 字体大小
            fontSize: 18,
            fontWeight: 500
          },
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: 'rgba(207, 217, 255,0)'
              },
              {
                offset: 0,
                color: 'rgb(238,214,158)'
              }
            ],
            global: false // 缺省为 false
          }
        },
        itemStyle: {
          color: '#ffb300',
          borderWidth: 0
          // borderColo: '#fff'
        }
      }
    ]
  }
  myEcharts.setOption(option)
})
</script>

<template>
  <div id="echarts" ref="myHeading" style="width: 100%; height: 300px"></div>
</template>

<style scoped lang="scss">
#echarts{
  //margin-top: 15px;
  box-shadow: 0px 10px 16px 0px
  rgba(132, 132, 152, 0.68);
  background: white;
  opacity: 0.9;
  border-radius: 15px;
  ::v-deep >div:first-child{
    width: 100%!important;
    canvas{
      width: 100%!important;
    }
  }
}
</style>
